<template>
	<view>
		<view class="goodsbox" @tap='itemClickAction'>
			<label class="radio" v-if='showRadio'  @tap='radioChangeAction'>
				<radio :checked="goodsInfo.goods_checked" style="transform:scale(0.9)" activeBackgroundColor="#C00000" />
			</label>
			<view class="good__item">
				<image class="item__icon" :src="goodsInfo.goods_small_logo || defaultImage" mode="scaleToFill"></image>
				<view class="item__info">
					<view class="info__title">{{goodsInfo.goods_name || '' }}</view>
					<view class="info__container">
						<view class="price">${{goodsInfo.goods_price | toFixed()  }}</view>
						<uni-number-box v-model="buyCount" v-if="showNum" class="number" :min="1" :max="limitMaxCount"
							@change="bindChange"></uni-number-box>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "yg-goodsItem",

		props: {
			
			// 是否展示图片左侧的 radio
			showRadio: {
				type: Boolean,
				default: false
			},
			
			// 是否展示 计数器
			showNum: {
				type: Boolean,
				default: false
			},
			
			// 商品列表
			goodsInfo: {
				type: Object,
				default(){
					return {}
				} 
			},

			//  购物车添加数据
			buyCount: {
				type: Number,
				default: 1
			},

			//   限制最小数量
			limitMinCount: {
				type: Number,
				default: 1
			},

			//  限制最大数量
			limitMaxCount: {
				type: Number,
				default: 100
			},
		},

		//  本地过滤器
		filters: {
			toFixed(opration) {
				return Number(opration).toFixed(2) || ''
			}
		},

		data() {
			return {
				// 默认图片
				defaultImage: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
			};
		},

		methods: {
			
			// radio 事件
			radioChangeAction() {
				this.goodsInfo.goods_checked = !this.goodsInfo.goods_checked
				this.$emit('radioChange', {
					  goods_id: this.goodsInfo.goods_id,
				    goods_checked: this.goodsInfo.goods_checked,
			    })
			},
			
			// 点击事件
			itemClickAction() {
				if (!this.showRadio) {
					uni.navigateTo({
						url: `/pages/goods_detail/goods_detail?goods_id=${this.goodsInfo.goods_id}`
					})
				} else {


				}
			},

			//  购物车添加数据
			bindChange(e) {
				this.$emit('numberChange', {
					goods_count: e,
					goods_id: this.goodsInfo.goods_id
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	
	.goodsbox {
		display: flex;
		align-items: center;
	  // padding: 0 20rpx;
		// background: papayawhip;
		
		.radio {
			 margin-right: 20rpx;
		}
		
		.good__item {
			display: flex;
			border-bottom: 1rpx solid #efefef;
			padding: 20rpx 0;
			flex: 1;
		
			.item__icon {
				width: 180rpx;
				height: 180rpx;
			}
		
			.item__info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 10rpx;
				flex: 1;
		
		
				.info__title {
					font-size: 28rpx;
					color: #333;
					//  限制显示 2 行
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: normal;
					word-break: break-all;
					line-height: 1.5;
					height: 1.5em * 2;
					max-height: 1.5em * 2;
					// 设置最小高度，防止内容过少时出现省略号
				}
		
				.info__container {
					display: flex;
					align-items: center;
					justify-content: space-between;
		
		
					.price {
						font-size: 32rpx;
						color: #C92525;
					}
		
					.number {
						margin-right: 10rpx;
					}
				}
			}
		}	
	}
	
	
	
</style>